<template>
	<view>
		<view class="list">
			<view class="mt-100" v-if="conversationList.length==0">
				<u-empty text="暂无消息" mode="message"></u-empty>
			</view>
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in conversationList"
				:key="item.conversationID" @click="messageHandle($event,item.conversationID)" @open="open" :options="options">
				<view class="item" v-if="item.conversationID=='C2Cadministrator'"
					@click="goSettingChat(item.userProfile.userID,item.type)">
					<view class="avatar">
						<u-image width="78" height="78" src="@/static/btn_msg.png" mode=""></u-image>
					</view>
					<view class="flex-1 pl-20">
						<view class="name line-clamp">
							系统消息
						</view>
						<view class="text line-clamp">
							{{item.lastMessage.payload.data}}
						</view>
					</view>
					<view class="date">
						<view class="time">
							{{item.lastMessage.lastTime | dateFormat('m-d-h-m') }}
						</view>
						<view class="num" v-if="item.unreadCount">
							{{item.unreadCount}}
						</view>
					</view>
				</view>
				<view class="item" v-if="item.type=='GROUP'"
					@click="goGroupChat(item.groupProfile.groupID,item.type,item.groupProfile.name)">
					<view class="avatar">
						<u-image width="78" height="78" src="@/static/icon-qun.png" mode=""></u-image>
					</view>
					<view class="flex-1 pl-20">
						<view class="name line-clamp">
							群聊消息-{{item.groupProfile.introduction}}
						</view>
						<view class="text line-clamp">
							{{item.lastMessage.messageForShow}}
						</view>
					</view>
					<view class="date">
						<view class="time">
							{{item.lastMessage.lastTime | dateFormat('m-d-h-m')}}
						</view>
						<view class="num" v-if="item.unreadCount">
							{{item.unreadCount}}
						</view>
					</view>
				</view>
			</u-swipe-action>
			<!-- <block v-for="(item,i) in conversationList" :key="i">
				<view class="item" v-if="item.conversationID=='C2Cadministrator'"
					@click="goSettingChat(item.userProfile.userID,item.type)">
					<view class="avatar">
						<u-image width="78" height="78" src="@/static/btn_msg.png" mode=""></u-image>
					</view>
					<view class="flex-1 pl-20">
						<view class="name line-clamp">
							系统消息
						</view>
						<view class="text line-clamp">
							{{item.lastMessage.payload.data}}
						</view>
					</view>
					<view class="date">
						<view class="time">
							{{item.lastMessage.lastTime | dateFormat('m-d-h-m') }}
						</view>
						<view class="num" v-if="item.unreadCount">
							{{item.unreadCount}}
						</view>
					</view>
				</view>

				<view class="item" v-if="item.type=='GROUP'"
					@click="goGroupChat(item.groupProfile.groupID,item.type,item.groupProfile.name)">
					<view class="avatar">
						<u-image width="78" height="78" src="@/static/icon-qun.png" mode=""></u-image>
					</view>
					<view class="flex-1 pl-20">
						<view class="name line-clamp">
							群聊消息-{{item.groupProfile.introduction}}
						</view>
						<view class="text line-clamp">
							{{item.lastMessage.messageForShow}}
						</view>
					</view>
					<view class="date">
						<view class="time">
							{{item.lastMessage.lastTime | dateFormat('m-d-h-m')}}
						</view>
						<view class="num" v-if="item.unreadCount">
							{{item.unreadCount}}
						</view>
					</view>
				</view>
			</block> -->
			<!-- <block v-for="item in conversationList" :key="item.conversationID">
				<view class="item" v-if="item.type=='GROUP'" @click="goGroupChat(item.groupProfile.groupID,item.type,item.groupProfile.name)">
					<view class="avatar">
						<u-image width="78" height="78" src="@/static/icon-qun.png" mode=""></u-image>
					</view>
					<view class="flex-1 pl-20">
						<view class="name line-clamp">
							群聊消息-{{item.groupProfile.introduction}}
						</view>
						<view class="text line-clamp">
							{{item.lastMessage.messageForShow}}
						</view>
					</view>
					<view class="date">
						<view class="time">
							{{item.lastMessage.lastTime | dateFormat('m-d-h-m')}}
						</view>
						<view class="num" v-if="item.unreadCount">
							{{item.unreadCount}}
						</view>
					</view>
				</view>
			</block> -->
		</view>

		<!-- 右侧菜单 -->
		<view class="fixed-btn" :style="{top:fixedTop + 'px'}" @touchmove.stop="startMove">
			<navigator hover-class="none" url="../../pages_message/myFirends/myFirends">
				<image class="icon-136" src="../../static/btn_firend.png" mode="widthFix"></image>
			</navigator>
			<!-- #ifndef MP -->
<!-- 			<navigator hover-class="none" url="../../pages_message/setting/setting">
				<image class="icon-136" src="../../static/btn_msg_setting.png" mode="widthFix"></image>
			</navigator> -->
			<!-- #endif -->
		</view>

		<!-- 发布弹窗 -->
		<n-release :openFlag="releasePopupShow" @close="closeRelease"></n-release>
		<!-- 顶部导航栏 -->
		<block v-if="shenheSwitch=='0'">
			<u-tabbar v-model="tabbarCurrent" :openFlag="releasePopupShow" :icon-size="48" :hide-tab-bar="true"
				inactive-color="#AAAAAA" :list="tabbarList" :mid-button="true" @change="selectTabbar"></u-tabbar>
		</block>
		<block v-else>
			<u-tabbar v-model="tabbarCurrent" :openFlag="releasePopupShow" :icon-size="48" :hide-tab-bar="true"
				inactive-color="#AAAAAA" :list="tabbarList1" :mid-button="false" @change="selectTabbar1"></u-tabbar>
		</block>

	</view>
</template>

<script>
	import {
		tabbar
	} from '@/pages/tabbar.js'
	import {
		tabbar1
	} from '@/pages/tabbar1.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				releasePopupShow: false, //	发布弹窗显示
				tabbarCurrent: 3,
				tabbarList: tabbar,
				tabbarList1: tabbar1,
				fixedTop: 300,
				messageNum: 0,
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			};
		},
		onShow() {
			if (this.shenheSwitch == '0') {
				this.tabbarCurrent = 3
			} else {
				this.tabbarCurrent = 1
			}
			this.getConversationList()
		},
		onHide() {
			this.releasePopupShow = false
		},
		onPullDownRefresh() {
			this.getConversationList()
			uni.stopPullDownRefresh()
		},
		computed: {
			...mapState({
				userInfo: (state) => state.user.userInfo,
				conversationList: (state) => state.im.conversationList,
				shenheSwitch: (state) => state.config.shenheSwitch,
			})
		},
		methods: {
			...mapActions(['getConversationList']),
			// 获取会话列表
			// getConversationList() {
			// 	// 获取全量的会话列表
			// 	let promise = this.tim.getConversationList();
			// 	promise.then((imResponse) => {
			// 		console.log(imResponse)
			// 		this.messageNum = 0
			// 		this.conversationList = imResponse.data.conversationList; // 全量的会话列表，用该列表覆盖原有的会话列表
			// 		console.log("this.conversationList: ", this.conversationList);
			// 		this.conversationList.forEach(item => {
			// 			if(item.conversationID!="@TIM#SYSTEM"){
			// 				this.messageNum += item.unreadCount
			// 			}
			// 		})
			// 		tabbar[3].count = this.messageNum
			// 	}).catch(function(imError) {
			// 		console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
			// 	});
			// },
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.conversationList[index].show = true;
				this.conversationList.map((val, idx) => {
					if (index != idx) this.conversationList[idx].show = false;
				})
			},
			messageHandle(e,conversationID){
				uni.showModal({
					title:'提示',
					content:'确定要删除会话吗？',
					success: (res) => {
						if(res.confirm){
							let promise = this.tim.deleteConversation(conversationID);
							promise.then((imResponse)=> {
							  // 删除会话成功
								this.$tools.toast('删除会话成功')
								this.getConversationList()
							}).catch(function(imError) {
							  console.warn('deleteConversation error:', imError); // 删除会话失败的相关信息
							});
						}
					}
				})
		
			},
			startMove(e) {
				this.fixedTop = e.changedTouches[0].pageY
			},
			endMove(e) {
				console.log(e.changedTouches)
			},
			// 前往群聊
			goGroupChat(id, type, name) {
				uni.navigateTo({
					url: '../../pages_message/chatRoom/chatRoom?userID=' + id + '&type=' + type + '&name=' + name
				})
			},
			// 前往系统消息
			goSettingChat(id, type) {
				uni.navigateTo({
					url: '../../pages_message/settingRoom/settingRoom?userID=' + id + '&type=' + type
				})
			},
			closeRelease() {
				this.tabbarCurrent = 3
				this.releasePopupShow = false
			},
			selectTabbar1(e) {
				uni.removeStorageSync('tabbar')
				if (e === 1) {
					uni.setStorageSync('tabbar', 3)
					uni.switchTab({
						url: this.tabbarList1[0].url
					})
					return
				}
				uni.switchTab({
					url: this.tabbarList1[e].url
				})
			},
			selectTabbar(e) {
				uni.removeStorageSync('tabbar')

				if (e == 2) {
					let is_auth = uni.getStorageSync('userInfo').is_auth
					if (is_auth != 1) {
						uni.showModal({
							title: '温馨提示',
							content: '您还没有实名认证，点击确定完成认证信息',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages_user/realname_authentication/realname_authentication'
									})
								}
							}
						})
						return
					}

					this.tabbarCurrent = 3
					this.releasePopupShow = !this.releasePopupShow
					console.log('!this.releasePopupShow', this.releasePopupShow)
					return
				} else {
					this.releasePopupShow = false
				}


				if (e === 1) {
					uni.setStorageSync('tabbar', 3)
					uni.switchTab({
						url: this.tabbarList[0].url
					})
					return
				}
				uni.switchTab({
					url: this.tabbarList[e].url
				})
			},
			// 创建群聊
			createGroup() {
				let memberList = [{
					userID: 'Nekomata'
				}]
				// this.selectUserList.forEach(item => {
				// 	memberList.push({
				// 		userID: item
				// 	})
				// })
				// console.log(memberList)
				// console.log(this.groupName)
				// if (this.groupName == '') {
				// 	uni.showToast({
				// 		title: '群名称不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.groupName.length > 30) {
				// 	uni.showToast({
				// 		title: '群名称不能超过30个字',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.avatar == '') {
				// 	uni.showToast({
				// 		title: '请选择群头像',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// 创建好友群
				let promise = this.tim.createGroup({
					type: this.TIM.TYPES.GRP_MEETING,
					name: '太原市到郑州市',
					// avatar: 'https://dingdiansoft.oss-cn-shanghai.aliyuncs.com/huayishiji/uploads/20220624/ce9f068d9be4830b19e8f6f29109dfbe.png',
					memberList: [{
						userID: 'Nekomata'
					}]
				});

				promise.then(function(imResponse) { // 创建成功
					console.log(imResponse)
					console.log(imResponse.data.group); // 创建的群的资料
					uni.showToast({
						title: '创建成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
					console.log(imResponse.data.overLimitUserIDList); // 超过了“单个用户可加入群组数”限制的用户列表，v2.10.2起支持
				}).catch(function(imError) {
					uni.showToast({
						title: '创建失败',
						icon: 'none'
					})
					console.warn('createGroup error:', imError); // 创建群组失败的相关信息
				});
			}

		}
	}
</script>

<style lang="scss">
	.list {
		// padding: 0 30upx;

		.item {
			@include flex-between;
			padding: 40upx 0;
			margin: 0 30upx;
			border-bottom: 1upx solid #EFEFEF;
			width: 690upx;

			.name {
				font-size: 32upx;
				font-weight: 500;
				color: #333333;
			}

			.text {
				font-size: 24upx;
				color: #999999;
				margin-top: 10upx;
			}

			.date {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: flex-start;
			}

			.time {
				font-size: 22upx;
				font-weight: 400;
				color: #AAAAAA;
			}

			.num {
				min-width: 28upx;
				line-height: 28upx;
				background: #DE2222;
				border-radius: 50%;
				text-align: center;
				font-size: 20upx;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 10upx;
			}
		}
	}

	.fixed-btn {
		position: fixed;
		right: 0;
		display: flex;
		flex-direction: column;
		z-index: 80;

		navigator {
			line-height: 0;
		}
	}

	/deep/ .u-drawer-bottom {
		background: transparent !important;
	}
</style>
